<template>
  <el-form-item :label="placeholder" :prop="name">
    <el-select v-if="canSelect" v-model="val" filterable style="width: 100%;" :placeholder="placeholder"
      @change="dateChange()">
      <el-option v-for="i in dict" :key="i.value" v-if="i.value >= minValue && i.value <= maxValue" :label="i.label"
        :value="i.value">
      </el-option>
    </el-select>

    <span v-else v-for="(item, index) in dict">
      <span v-if="item.value == value">{{ item.label }}</span>
    </span>

  </el-form-item>
</template>

<script>
export default {
  name: 'SDictForm',
  props: {
    name: "",
    value: "",
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 10000
    },


    canSelect: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      minValue: this.min,
      maxValue: this.max,
      val: this.value,
      placeholder: ""
    }
  },
  methods: {
    dateChange: function () {

      this.$emit('input', this.val);
    }
  },
  created() {

    var state = this.$store.state.dict;
    this.placeholder = state.dictName[this.name]
    this.dict = state.dicts[this.name];
  },
  watch: {
    "value": {
      handler(newVal, oldVal) {
        this.val = newVal;
      }
    }
  }

}
</script>
 